<template>
	<view>
		<view class="content">
			<uni-section title="员工列表" type="line"></uni-section>
			<uni-list style="width:95%">
				<uni-swipe-action>
					<text class="tips" v-if="employee.length <= 0">无员工信息</text>
					<uni-swipe-action-item v-for="item in employee"
					:key="item.id"
					:right-options="options" 
					:auto-close="true" 
					@change="change" 
					@click="bindClick($event,item)">
						<uni-list-item
						:key="item.id"
						:title="item.realName == '' || item.realName == null ? item.nickName : item.realName"
						:thumb="item.avatar == '' ? defaultAvatar : item.avatar"
						thumbSize="lg"
						:note="item.duty == 'REIMBURSEMENT' ? '报销人员' : ''" 
						:rightText="item.duty == 'AUDITOR' ? '审核人员' : ''">
						</uni-list-item>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-list>
			<view>
				<xy-dialog 
				title="修改员工信息" 
				:show.sync="showDialog"
				@cancelButton="clickCancel">
					<view style="padding: 0 30upx 30upx;">
						<uni-forms ref="updateForm" labelAlign="left" :modelValue="updates">
							<uni-forms-item label-align="right" label="姓名:" name="realName">
								<uni-easyinput v-model="updates.realName" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label-align="right" label="备注:" name="note">
								<uni-easyinput v-model="updates.note" placeholder="请输入备注" />
							</uni-forms-item>
						</uni-forms>
						<button id="submit-button1" type="default" :plain="true" @click="submit"></button>
					</view>
				</xy-dialog>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultAvatar: '/static/defaultAvatar.png',
				team: {},
				showDialog: false,
				employee: [],
				updates: {
					id: '',
					realName: '',
					note: '',
				},
				options: [{
						text: '备注',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '移除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
			}
		},
		onLoad(ev) {
			this.getTeamById(ev.id);
			this.getEmployee(ev.id);
		},
		onShow() {
			this.isLogin = this.$dry.isLogin();
			if(!this.isLogin){
				uni.showModal({
					title: "信息",
					content: "需要登录后查看，去登录",
					showCancel: false,
					confirmText: "确定",
					success: function (res) {
						if (res.confirm) {
							uni.switchTab({
								url: '../user/user',
							})
						}
					}
				});
			}
			else {
				this.getEmployee(this.team.id);
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			// this.$refs.updateForm.setRules(this.rules);
		},
		onPullDownRefresh() {
			// console.log('onPullDownRefresh');
			this.getEmployee();
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			getTeamById(id){
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("getTeamById",token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"id": id
						},
				    	success: data => {
							if(data.statusCode === 200) {
								this.team = data.data;
							}
						}
					})
				}
			},
			getEmployee(id) {
				var token = this.$dry.getToken();
				var teamId = id;
				if(!id) {
					teamId = this.team.id;
				}
				if(token){
				    var data = this.$request.run("listEmployeeByConditions",token);
				    uni.request({
				    	url: data.url,
						method: data.method,
						header: data.header,
				    	data: {
							"teamId": teamId,
							"employeeStatus": 'TEAM'
						},
				    	success: data => {
							if(data.statusCode === 200) {
								this.employee = data.data;
							}
				    	},
				    	fail: (data, code) => {
				    		console.log('fail' + JSON.stringify(data));
				    	}
				    })
				}
			},
			change(e) {
				this.isOpened = e;
				//console.log('返回：', e);
			},
			clickCancel() {
				this.showDialog = false;
			},
			bindClick(e,data) {
				var that = this;
				if(e.index == 0){
					this.updates.id = data.id,
					this.updates.realName = data.realName;
					this.updates.note = data.note;
					this.showDialog = true;
					//this.$refs.inputDialog.open();
				}
				else {
					uni.showModal({
						title: "信息",
						content: "确定要移除 " + (data.realName == '' || data.realName == null ? data.nickName : data.realName) + " 吗",
						showCancel: true,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								that.delEmployee(data.id);
							}
						}
					});
				}
			},
			submit() {
				this.$refs['updateForm'].validate().then(res => {
					this.showDialog = false;
					uni.showLoading({
						title: '正在更新...'
					});
					this.updateEmployee();
					setTimeout(() => {
						uni.hideLoading();
						this.getEmployee();
					}, 2000)
				}).catch(err => {
					uni.showToast({
						title: "更新失败"
					})
				})
			},
			updateEmployee() {
				var token = this.$dry.getToken();
				if(token){
					var data = this.$request.run("updateEmployee", token);
					uni.request({
						url: data.url,
						method:data.method,
						header:data.header,
						data: this.updates,
				    	success: data => {
				    		uni.showToast({
				    			title: "修改成功！",
				    			duration: 1000
				    		})
							this.getEmployee();
				    	}
				    })
				}
			},
			delEmployee(id) {
				var token = this.$dry.getToken();
				if(token){
					var data = this.$request.run("deleteEmployeeById", token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {
							"id": id
						},
						success: data => {
							if(data.statusCode == 200 && data.data.code == 0){
								uni.showToast({
									title: "删除成功",
									duration: 1000
								})
								this.getEmployee();
							}
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}
	
	.slot-text {
		flex: 1;
		font-size: 14px;
		margin-right: 10px;
	}
	.del-button {
		margin-top: -80rpx;
	}
	#submit-button1,#submit-button2 {
		width: 50%;
		height: 100rpx;
		margin-bottom: -120rpx;
		margin-right: -30rpx;
		border: none;
		outline: none;
		z-index: 100;
	}
	.tips{
		padding:10rpx 20rpx;
		text-align: left;
		font-size: 24rpx;
		color: #0077AA;
	}
</style>
